<template>
  <div class="points-record-container">
    <!-- 顶部导航 -->
    <div class="nav-header">
      <div class="back-button" @click="goBack">
        <Icon name="arrow-left" size="20" />
      </div>
      <h1 class="page-title">积分记录</h1>
    </div>
    
    <!-- 记录列表 -->
    <van-pull-refresh v-model="isRefreshing" @refresh="onRefresh" class="refresh-container">
      <van-list
        v-model:loading="isLoadingMore"
        :finished="!hasMore"
        finished-text="没有更多了"
        loading-text="加载中..."
        @load="loadMoreRecords"
      >
        <div class="records-list">
          <div v-if="isLoading && filteredRecords.length === 0" class="loading-state">
            <div class="loading-spinner"></div>
            <span>加载中...</span>
          </div>
          
          <template v-else>
            <div v-if="filteredRecords.length > 0">
              <div 
                v-for="record in filteredRecords" 
                :key="record.id"
                class="record-item"
              >
                <div class="record-header">
                  <div class="record-type">贡献数据</div>
                  <Tag :type="getStatusType(record.payStatus)" class="status-tag">
                    {{ getStatusText(record.payStatus) }}
                  </Tag>
                </div>
                
                <div class="record-content">
                  <div class="record-info">
                    <div class="record-title">{{ record.pointNum }}</div>
                    <div class="record-time">{{ record.createdAt }}</div>
                  </div>
                  
                  <div :class="['record-amount', true ? 'income' : 'expense']">
                    {{ true ? '+' : '-' }}{{ formatNumber(record.amount) }} HDFS
                  </div>
                </div>
                
                <!-- <div class="record-detail" v-if="record.detail">
                  <div class="detail-item" v-for="(item, key) in record.detail" :key="key">
                    <span class="detail-label">{{ key }}:</span>
                    <span class="detail-value" :class="{'hash-value': key.includes('Hash')}">
                      {{ item }}
                    </span>
                  </div>
                </div>
                
                <div class="record-footer" v-if="record.remark">
                  <div class="record-remark">
                    <span class="remark-label">备注:</span>
                    <span class="remark-content">{{ record.remark }}</span>
                  </div>
                </div> -->
              </div>
            </div>
            
            <div v-else class="empty-state">
              <Icon name="info-o" size="48" class="empty-icon" />
              <div class="empty-text">暂无积分记录</div>
            </div>
          </template>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast, Icon, Tag } from 'vant';
import { contributorList } from '@/api/circulation';
import { formatNumber } from '@/utils/utils'

const router = useRouter();

// 状态变量
const isLoading = ref(true);
const isLoadingMore = ref(false);
const isRefreshing = ref(false);
const pointsRecords = ref([]);
const page = ref(1);
const pageSize = ref(10);
const hasMore = ref(true);

// 直接使用pointsRecords作为显示数据
const filteredRecords = computed(() => {
  return pointsRecords.value;
});

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    '0': '待结算',
    '1': '已结算',
    '2': '已拒绝'
  };
  return statusMap[status] || status;
};

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    '0': 'warning',
    '1': 'success',
    '2': 'danger'
  };
  return typeMap[status] || 'default';
};

// 下拉刷新
const onRefresh = async () => {
  page.value = 1;
  await loadRecords(true);
  isRefreshing.value = false;
};

// 加载记录数据
const loadRecords = async (isRefresh = false) => {
  if (page.value === 1) {
    isLoading.value = true;
  } else {
    isLoadingMore.value = true;
  }
  
  try {
    const params = {
      page: page.value,
      size: pageSize.value
    };
    
    const res = await contributorList(params);
    
    if (res.code === 0 && res.data) {
      if (page.value === 1 || isRefresh) {
        pointsRecords.value = res.data.list;
      } else {
        pointsRecords.value = [...pointsRecords.value, ...res.data.list];
      }
      
      hasMore.value = pointsRecords.value.length < res.data.total;
    } 
  } catch (error) {
    console.error('加载积分记录失败:', error);
  } finally {
    isLoading.value = false;
    isLoadingMore.value = false;
  }
};

// 加载更多记录
const loadMoreRecords = () => {
  if (isLoadingMore.value || !hasMore.value) return;
  
  page.value++;
  loadRecords();
};

// 返回上一页
const goBack = () => {
  router.back();
};

// 组件挂载时加载数据
onMounted(() => {
  loadRecords();
});
</script>

<style scoped>
.points-record-container {
  padding-bottom: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 顶部导航 */
.nav-header {
  display: flex;
  align-items: center;
  padding: 16px;
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.back-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  margin-left: 8px;
}

/* 下拉刷新容器 */
.refresh-container {
  min-height: calc(100vh - 60px);
}

/* 记录列表 */
.records-list {
  padding: 12px;
  margin-top: 8px;
}

.record-item {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.record-type {
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

.status-tag {
  font-size: 12px !important;
  padding: 2px 8px !important;
}

.record-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.record-info {
  flex: 1;
}

.record-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.record-time {
  font-size: 12px;
  color: #999;
}

.record-amount {
  font-size: 16px;
  font-weight: 600;
}

.record-amount.income {
  color: #07c160;
}

.record-amount.expense {
  color: #ee0a24;
}

.record-detail {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.detail-item {
  display: flex;
  margin-bottom: 8px;
  font-size: 13px;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-label {
  color: #666;
  width: 80px;
  flex-shrink: 0;
}

.detail-value {
  color: #333;
  flex: 1;
  word-break: break-all; /* 确保长文本会换行 */
  overflow-wrap: break-word; /* 确保长单词会换行 */
}

/* Hash值的特殊样式 */
.hash-value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 在宽屏设备上显示完整的Hash值 */
@media screen and (min-width: 768px) {
  .hash-value {
    white-space: normal;
    text-overflow: initial;
  }
}

.record-footer {
  border-top: 1px dashed #eee;
  padding-top: 12px;
}

.record-remark {
  font-size: 13px;
  color: #666;
}

.remark-label {
  color: #999;
  margin-right: 4px;
}

.remark-content {
  color: #666;
}

/* 加载状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #999;
  font-size: 14px;
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #1989fa;
  border-radius: 50%;
  margin-bottom: 8px;
  animation: spin 1s linear infinite;
}

.loading-spinner.small {
  width: 16px;
  height: 16px;
  margin-bottom: 0;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: #999;
}

.empty-icon {
  color: #ddd;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 14px;
}
</style>